@import "[default].parameters.css";

.button {
    padding: var(--spacing-24) var(--spacing-32);
    overflow: hidden;
    transition: all 0.25s cubic-bezier(0.310, -0.105, 0.430, 1.400);
    place-self: start;
    text-decoration: none !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--color-green-600);
    background-color: var(--color-green-600);
    color: var(--color-white);
    margin-bottom: var(--display-stacks-xl);
}

    .button div {
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
        transition: transform 0.4s ease, opacity 0.3s ease, background-color 0.4s;
    }

    .button span {
        display: block;
        white-space: normal;
        transition: transform 0.4s ease, opacity 0.3s ease;
    }

    /* Hover/focus base */
    .button:hover,
    .button:focus {
        background-color: var(--color-white);
        color: var(--color-green-600);
        border-color: var(--color-green-600);
    }

    /* Varianti */
    .button.button-outlined {
        background-color: transparent;
        color: var(--color-green-600);
    }        
        .button.button-outlined:hover,
        .button.button-outlined:focus {
            background-color: var(--color-green-600);
            color: var(--color-white);
        }

    .button.button-outlined-white {
        background-color: transparent;
        color: var(--color-white);
        border: 2px solid var(--color-white);
    }

        .button.button-outlined-white:hover,
        .button.button-outlined-white:focus {
            background-color: var(--color-white);
            color: var(--color-green-900);
        }

    .button.button-outlined-dark {
        background-color: transparent;
        color: var(--color-green-900);
        border: 2px solid var(--color-green-900);
    }

        .button.button-outlined-dark:hover,
        .button.button-outlined-dark:focus {
            background-color: var(--color-green-900);
            color: var(--color-white);
        }

.button-sm {
    padding: var(--spacing-16) var(--spacing-24);
    font-size: var(--font-size-xs);
    margin-bottom: 0;
}